<template lang="html">
  <transition :name="transitionName">
    <router-view class="child-view"></router-view>
  </transition>
</template>

<script>
import * as types from '@/store/types'

export default {
  data () {
    return {
      transitionName: 'slide-left',
    }
  },
  mounted () {
    this.$store.dispatch(types.LOADING_HIDE)
  },
  watch: {
    '$route' (to, from) {
      // 页面转场动画
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  },
}
</script>

<style lang="less">
body {
  background-color: #f5f5f9;
}
.eg-page_bd {
  padding: 0 30px;
}

.child-view {
  position: absolute;
  transition: all .5s cubic-bezier(.55,0,.1,1);
}

.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
</style>
